<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generic-TCG test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1">

<style type="text/css">
    body {
        font-size: 12px;
        background-color: #000000;
    }

    .tabs {
        overflow: hidden;
    }

    .card {
        position: absolute;
    }

    .cardImg {
        width: 100%;
        height: 100%;
    }
</style>
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">

<script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-sizes.js"></script>

<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/inheritance.js"></script>

<script type="text/javascript" src="js/CardContainer.js"></script>
<script type="text/javascript" src="js/CardGroup.js"></script>

<script type="text/javascript" src="js/SampleGameUi.js"></script>

<script type="text/javascript" src="js/RowCardLayoutCardGroup.js"></script>
<script type="text/javascript" src="js/AttachedCardsLayoutCardGroup.js"></script>

<script type="text/javascript">
var gameUi1;
var gameUi2;
var gameUi3;
var gameUi4;
var gameUi5;
var containerUi6;

function addFirstLayout() {
    var firstLayoutCardContainer = $("#tabs-1");
    var firstGroup = new RowCardLayoutCardGroup(firstLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return true;
            });
    firstGroup.setMaxCardHeight(100);

    gameUi1 = new SampleGameUi(firstLayoutCardContainer, firstGroup);
}
function addSecondLayout() {
    var secondLayoutCardContainer = $("#tabs-2");
    var secondGroup = new AttachedCardsLayoutCardGroup(secondLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return true;
            },
            function(cardDiv, cardId, props) {
                return props["attach1"] == null;
            });
    secondGroup.setMaxCardHeight(200);

    var cardAttached = function(cardId, rootCardId) {
        var cardProps = secondGroup.findCardPropsById(cardId);
        var attachedTo = cardProps["attach1"];
        if (attachedTo != null) {
            if (attachedTo == rootCardId)
                return true;
            else
                return cardAttached(attachedTo, rootCardId);
        }
        return false;
    };

    secondGroup.setZIndexBase(100);
    secondGroup.addAttachedGroup(-1 / 5, 0,
            function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) {
                return cardAttached(cardIdAtt, cardId);
            });

    gameUi2 = new SampleGameUi(secondLayoutCardContainer, secondGroup);
}
function addThirdCardLayout() {
    var thirdLayoutCardContainer = $("#tabs-3");
    var thirdGroup = new AttachedCardsLayoutCardGroup(thirdLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return true;
            },
            function(cardDiv, cardId, props) {
                return props["attach1"] == null;
            });

    var cardAttached = function(cardId, rootCardId) {
        var cardProps = thirdGroup.findCardPropsById(cardId);
        var attachedTo = cardProps["attach1"];
        if (attachedTo != null) {
            if (attachedTo == rootCardId)
                return true;
            else
                return cardAttached(attachedTo, rootCardId);
        }
        return false;
    };

    thirdGroup.setZIndexBase(100);
    thirdGroup.addAttachedGroup(1 / 5, 0,
            function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) {
                return cardAttached(cardIdAtt, cardId);
            });

    gameUi3 = new SampleGameUi(thirdLayoutCardContainer, thirdGroup);
}
function addFourthCardLayout() {
    var thirdLayoutCardContainer = $("#tabs-4");
    var thirdGroup = new AttachedCardsLayoutCardGroup(thirdLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return true;
            },
            function(cardDiv, cardId, props) {
                return props["attach1"] == null;
            });

    var cardAttached = function(cardId, rootCardId) {
        var cardProps = thirdGroup.findCardPropsById(cardId);
        var attachedTo = cardProps["attach1"];
        if (attachedTo != null) {
            if (attachedTo == rootCardId)
                return true;
            else
                return cardAttached(attachedTo, rootCardId);
        }
        return false;
    };

    thirdGroup.setZIndexBase(100);
    thirdGroup.addAttachedGroup(0, -1 / 5,
            function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) {
                return cardAttached(cardIdAtt, cardId);
            });

    gameUi4 = new SampleGameUi(thirdLayoutCardContainer, thirdGroup);
}
function addFifthCardLayout() {
    var thirdLayoutCardContainer = $("#tabs-5");
    var thirdGroup = new AttachedCardsLayoutCardGroup(thirdLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return true;
            },
            function(cardDiv, cardId, props) {
                return props["attach1"] == null && props["attach2"] == null;
            });

    thirdGroup.setZIndexBase(100);

    var cardAttached1 = function(cardId, rootCardId) {
        var cardProps = thirdGroup.findCardPropsById(cardId);
        var attachedTo = cardProps["attach1"];
        if (attachedTo != null) {
            if (attachedTo == rootCardId)
                return true;
            else
                return cardAttached1(attachedTo, rootCardId);
        }
        return false;
    };

    thirdGroup.addAttachedGroup(0, -1 / 5,
            function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) {
                return cardAttached1(cardIdAtt, cardId);
            });

    var cardAttached2 = function(cardId, rootCardId) {
        var cardProps = thirdGroup.findCardPropsById(cardId);
        var attachedTo = cardProps["attach2"];
        if (attachedTo != null) {
            if (attachedTo == rootCardId)
                return true;
            else
                return cardAttached2(attachedTo, rootCardId);
        }
        return false;
    };

    thirdGroup.addAttachedGroup(-1 / 5, 0,
            function(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt) {
                return cardAttached2(cardIdAtt, cardId);
            });

    gameUi5 = new SampleGameUi(thirdLayoutCardContainer, thirdGroup);
}
function addSixthCardLayout() {
    var sixthLayoutCardContainer = $("#tabs-6");

    var layoutGroups = function(cardGroups, left, top, width, height) {
        var padding = 3;
        var groupWidth = (width-3*padding)/2;
        var groupHeight = (height-5*padding)/4;

        cardGroups["1"].setLayout(left+padding, top+padding, groupWidth, groupHeight);
        cardGroups["2"].setLayout(left+padding, top+2*padding+groupHeight, groupWidth, groupHeight);
        cardGroups["3"].setLayout(left+padding, top+3*padding+2*groupHeight, groupWidth, groupHeight);
        cardGroups["4"].setLayout(left+padding, top+4*padding+3*groupHeight, groupWidth, groupHeight);

        cardGroups["5"].setLayout(left+2*padding+groupWidth, top+padding, groupWidth, groupHeight);
        cardGroups["6"].setLayout(left+2*padding+groupWidth, top+2*padding+groupHeight, groupWidth, groupHeight);
        cardGroups["7"].setLayout(left+2*padding+groupWidth, top+3*padding+2*groupHeight, groupWidth, groupHeight);
        cardGroups["8"].setLayout(left+2*padding+groupWidth, top+4*padding+3*groupHeight, groupWidth, groupHeight);
    };

    var layoutCard = function(cardDiv, cardId, props, zIndex, left, top, width, height) {
    };

    var widthToHeightScale = function(cardId, props) {
        if (props["hor"]==true)
            return 500/360;
        else
            return 360/500;
    };

    var cardContainer = new CardContainer(sixthLayoutCardContainer, layoutGroups, layoutCard, widthToHeightScale);
    cardContainer.addCardGroup("1", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="1";
            }));
    cardContainer.addCardGroup("2", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="2";
            }));
    cardContainer.addCardGroup("3", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="3";
            }));
    cardContainer.addCardGroup("4", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="4";
            }));
    cardContainer.addCardGroup("5", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="5";
            }));
    cardContainer.addCardGroup("6", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="6";
            }));
    cardContainer.addCardGroup("7", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="7";
            }));
    cardContainer.addCardGroup("8", new RowCardLayoutCardGroup(sixthLayoutCardContainer,
            function(cardDiv, cardId, props) {
                return props["group"]=="8";
            }));

    containerUi6 = cardContainer;
}

$(document).ready(
        function () {
            $("#tabs").tabs({selected: 0});
            addFirstLayout();
            addSecondLayout();
            addThirdCardLayout();
            addFourthCardLayout();
            addFifthCardLayout();
            addSixthCardLayout();

            $(window).resize(
                    function() {
                        resize();
                    });

            resize();

            gameUi1.addCard("1", {});
            gameUi1.addCard("2", {});
            gameUi1.addCard("3", {});
            gameUi1.addCard("3a", {});
            gameUi1.addCard("3b", {});
            gameUi1.addCard("3c", {});
            gameUi1.addCard("3d", {});
            gameUi1.addCard("4", {});
            gameUi1.addCard("5", {"hor":true});

            gameUi2.addCard("6", {});
            gameUi2.addCard("7", {"attach1": "6"});
            gameUi2.addCard("8", {"hor":true});
            gameUi2.addCard("9", {"attach1": "7", "hor": true});
            gameUi2.addCard("10", {"attach1": "9"});

            gameUi3.addCard("11", {});
            gameUi3.addCard("12", {"attach1": "11"});
            gameUi3.addCard("13", {"hor":true});
            gameUi3.addCard("14", {"attach1": "12", "hor": true});
            gameUi3.addCard("15", {"attach1": "14"});

            gameUi4.addCard("16", {});
            gameUi4.addCard("17", {"attach1": "16"});
            gameUi4.addCard("18", {});
            gameUi4.addCard("19", {"hor": true});
            gameUi4.addCard("20", {"attach1": "19", "hor": true});
            gameUi4.addCard("21", {"attach1": "20"});
            gameUi4.addCard("22", {"attach1": "19"});

            gameUi5.addCard("23", {});
            gameUi5.addCard("24", {"attach1": "23"});
            gameUi5.addCard("25", {"attach2": "23"});
            gameUi5.addCard("26", {"hor": true});

            for (var i=0; i<10; i++) {
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 31+i*8, {"group":"1"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 32+i*8, {"group":"2"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 33+i*8, {"group":"3"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 34+i*8, {"group":"4"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 35+i*8, {"group":"5"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 36+i*8, {"group":"6"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 37+i*8, {"group":"7"});
                containerUi6.addCard($("<img class='cardImg' src='images/vertical.png'>"), 38+i*8, {"group":"8"});
            }

            gameUi1.layoutCards();
            gameUi2.layoutCards();
            gameUi3.layoutCards();
            gameUi4.layoutCards();
            gameUi5.layoutCards();
            containerUi6.layoutCards();
        });

function resize() {
    var width = $(window).width();
    var height = $(window).height();

    var border = $("#tabs").border();

    width = width - border.left - border.right;
    height = height - border.top - border.bottom;

    var innerWidth = width - 30;
    var innerHeight = height - 30;

    if (innerHeight < 300)
        innerHeight = 300;
    if (innerWidth < 400)
        innerWidth = 400;

    $("#tabs").css({"width": innerWidth, "height": innerHeight});

    var resultHeight = innerHeight - $("ul", $("#tabs")).height();
    resultHeight = resultHeight - 3;

    gameUi1.layoutGame(innerWidth, resultHeight);
    gameUi2.layoutGame(innerWidth, resultHeight);
    gameUi3.layoutGame(innerWidth, resultHeight);
    gameUi4.layoutGame(innerWidth, resultHeight);
    gameUi5.layoutGame(innerWidth, resultHeight);
    containerUi6.setLayout(0, 0, innerWidth, resultHeight);
}

</script>
</head>
<body>
<div id="tabs" class="tabs">
    <ul>
        <li><a href="#tabs-1">Simple layout</a></li>
        <li><a href="#tabs-2">Attachment left layout</a></li>
        <li><a href="#tabs-3">Attachment right layout</a></li>
        <li><a href="#tabs-4">Attachment top layout</a></li>
        <li><a href="#tabs-5">Attachment multiple layout</a></li>
        <li><a href="#tabs-6">Multiple groups</a></li>
    </ul>
    <div id="tabs-1" style="position: relative"></div>
    <div id="tabs-2" style="position: relative"></div>
    <div id="tabs-3" style="position: relative"></div>
    <div id="tabs-4" style="position: relative"></div>
    <div id="tabs-5" style="position: relative"></div>
    <div id="tabs-6" style="position: relative"></div>
</div>
</body>
</html>
